<%--
  Date: 2024/10/14 8:58
  Description:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
</html>
<html>
<head>
    <title>Title</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.17/dist/css/layui.css" rel="stylesheet">
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.17/dist/layui.js"></script>
</head>
<body>
<%-- 导航区--%>
<ul class="layui-nav">
    <li class="layui-nav-item">
        <a href="javascript:;"><span>${username}</span><span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item" lay-unselect>
        <a href="javascript:;">
            <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="layui-nav-img">
        </a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;" class="personal">个人资料</a></dd>
            <dd><a href="javascript:;" class="changePwd">密码修改</a></dd>
            <hr>
            <dd style="text-align: center;"><a href="javascript:;" class="exit">安全退出</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" style="float: right">
        <a href="javascript:;"><span>活跃用户:${activeUser}人</span><span class="layui-badge-dot"></span></a>
    </li>
</ul>
<%--头部工具栏模板--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="bathDel">批量删除</button>
    </div>
</script>

<%-- 行工具栏模板--%>
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</a>
    </div>
</script>

<table class="layui-hide" id="ID-table-demo-page"></table>

<script>
    <%--    layui 的设计  分模块化  form  table--%>
    layui.use('table', function () {
        // table对象
        let table = layui.table,
            $ = layui.jquery,
            layer = layui.layer;

        // 创建渲染实例
        table.render({
            elem: '#ID-table-demo-page',
            url: '/javaweb/score/layui?method=scorePage', // 此处为静态模拟数据，实际使用时需换成真实接口   异步请求
            toolbar: '#toolbarDemo',  // 表格绑定头部工具栏
            cols: [[
                //  开启列复选框  fixed  固定复选框的位置
                {type: 'checkbox', fixed: 'left'},
                //  field 需要渲染数据的属性名    width 列宽    title  表格字段名  sort 开启列排序
                {field: 'id', title: 'ID'},
                {field: 'name', title: '姓名'},
                {field: 'score', title: '成绩'},
                {field: 'course', title: '科目'},
                //  绑定模板
                {fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo'}
            ]],
            page: true, // 开启分页
            limits: [5, 10, 15, 20, 30, 40],  //设置每页展示数据的下拉选
            limit: 5   // 默认每页展示的条数
        });

        // 头部工具栏事件     ID-table-demo-page    table  id
        table.on('toolbar(ID-table-demo-page)', function (obj) {
            let id = obj.config.id;
            let checkStatus = table.checkStatus(id);
            let othis = lay(this);
            switch (obj.event) {
                case 'bathDel':
                    let data = checkStatus.data;  // [{},{}]
                    let ids = data.map(lineData => lineData.id)  // [1,2,3,4]

                    if (ids.length == 0) {
                        layer.msg('请至少选择一条数据')
                        return
                    }
                    // 发送http请求  删除对应行数据   批量删除  异步请求
                    $.ajax({
                        url: '/javaweb/score/layui?method=batchDel',
                        data: {ids: JSON.stringify(ids)},
                        type: 'POST',
                        dataType: 'JSON',
                        success: function (res) {
                            // 提示
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1}, function () {
                                    // 表格重载
                                    table.reload("ID-table-demo-page")
                                })
                            } else {
                                layer.msg(res.msg, {icon: 2})
                            }

                        }
                    })

                    break;
                case 'add':
                    layer.open({
                        title: '新增',
                        type: 2,   //  设置弹出层类型  iframe
                        maxmin: true, // 允许全屏最小化
                        shade: 0.5, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        area: ['60%', '70%'],
                        content: 'addScore.jsp',
                        end: function () {  // 弹窗关闭时 回调
                            table.reload("ID-table-demo-page")
                        }
                    });
                    break;
            }
            ;
        });
        // 触发单元格工具事件
        table.on('tool(ID-table-demo-page)', function (obj) {
            let data = obj.data; // 获得当前行数据
            // 添加缓存到会话对象
            sessionStorage.setItem("score", JSON.stringify(data))
            // 获取指定数据
            // sessionStorage.getItem()
            // 删除数据
            // sessionStorage.removeItem()

            if (obj.event === 'edit') {
                //  弹出层
                layer.open({
                    title: '编辑',
                    type: 2,   //  设置弹出层类型  iframe
                    maxmin: true, // 允许全屏最小化
                    shade: 0.5, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    area: ['60%', '70%'],
                    content: 'editScore.jsp',
                    end: function () {
                        table.reload("ID-table-demo-page")
                    }
                });
            } else if (obj.event === 'del') {

                $.ajax({
                    url: '/javaweb/score/layui?method=batchDel',
                    data: {ids: JSON.stringify([data.id])},
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (res) {
                        // 提示
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1}, function () {
                                // 表格重载
                                table.reload("ID-table-demo-page")
                            })
                        } else {
                            layer.msg(res.msg, {icon: 2})
                        }

                    }
                })
            }
        });

        // 绑定个人中心的单击事件
        $('a.personal').on('click', function () {

            // 发送异步请求  获取个人信息
            $.get('/javaweb/user?method=personalInfo', function (res) {
                if (res.code == 0) {
                    sessionStorage.setItem("user", JSON.stringify(res.data))
                }
            })

            // 弹窗
            layer.open({
                title: '个人信息',
                type: 2,
                area: ['40%', '60%'],
                maxmin: true,
                shade: 0.5,
                shadeClose: true,
                content: 'personal.jsp',
            })
        })

        $('a.changePwd').on('click', function () {
            layer.open({
                title: '密码修改',
                type: 2,
                area: ['40%', '60%'],
                maxmin: true,
                shade: 0.5,
                shadeClose: true,
                content: 'editPwd.jsp',
            })
        })

        $('a.exit').on('click', function () {
            layer.confirm('确定要退出吗?', {
                btn: ['确定', '关闭'] //按钮
            }, function () {
                //发送异步请求 销毁对应的会话对象
                $.get('/javaweb/user?method=logout',function (res){
                    if (res.code==0){
                        layer.msg(res.msg, {icon: 1}, function () {
                            window.location.href = 'login.jsp'
                        });
                    }else{
                        layer.msg(res.mag,{icon:2})
                    }
                })

            });
        })

    });


</script>


</body>
</html>
